<style>

    /*    海报*/
    .poster,.service{
        background: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        z-index: 3;
    }
    .poster .content{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 0.20rem 0.20rem 0 0;
        overflow: hidden;
    }
    .poster .content .head{
        background: linear-gradient(to right,#fe7e8c,#f8347d);
        height: 1.18rem;
        line-height: 1.18rem;
        color: #ffffff;
        font-size: 0.58rem;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .poster .content .head .close{
        position: absolute;
        right: 0.47rem;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 0.36rem;
        height: 0.36rem;
        position: absolute;
        z-index: 1;
    }
    .poster .content .head .top_img{
        width: 4.43rem;
        height: 0.78rem;
        margin: 0.22rem auto 0;
    }
    .poster .content .head text{
        color: #fff100;
    }
    .poster .content .detail{
        background: #f7f7f7;
        margin-top: 0;
    }
    .poster .content .detail .d_top{
        padding-top: 0.20rem;
        display: flex;
        justify-content: flex-start;
        background: #ffffff;
        padding-bottom: 0.4rem;
    }
    .poster .content .detail .avater{
        width: 0.76rem;
        height: 0.76rem;
        border-radius: 0.10rem;
        margin-right: 0.20rem;
        margin-left: 0.20rem;
    }
    .poster .content .detail .detail_right{
        width: 6.00rem;
        position: relative;
    }
    .poster .content .detail .detail_right .name{
        display: block;
        color: #536690;
        line-height: 0.60rem;
        font-size: 0.32rem;
    }
    .poster .content .detail .detail_right .detail_txt{
        line-height: 0.42rem;
        font-size: 0.28rem;
    }
    .poster .content .detail .detail_right .poster_img{
        width: 2.60rem;
        height: 4.10rem;
        display: block;
        margin-top: 0.10rem;
    }
    .poster .content .detail .detail_right .time{
        color: #666666;
        font-size: 0.22rem;
        display: block;
        margin-top: 0.20rem;
        position: relative;
    }
    .poster .content .detail .btns{
        margin: 0 auto;
        padding: 0.35rem 0.35rem 0.4rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #ffffff;
        margin-top: 0.14rem;
    }
    .poster .content .detail .btn{

        height: 0.85rem;
        background-image: linear-gradient(to right,#fe7c8b,#f8387d);

        text-align: center;
        line-height: 0.85rem;
        font-size: 0.24rem;
        border-radius: 0.85rem;
        margin-left: 0.05rem;
        padding: 0;
        color: #fffbfb;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        padding: 0 0.4rem;
        white-space: nowrap;
    }
    .poster .content .detail .btn .icon{
        width: 0.28rem;
        height: 0.28rem;
        margin-right: 0.2rem;
    }
    .poster .content .detail .btn1::after{
        content: "";
        background-image: url({$_G['URL']['BEILAI_IMG']}/num01.png);
        width: 0.67rem;
        height: 0.8rem;
        background-size: 0.67rem 0.8rem;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        right: 0.57rem;
        top: 0.36rem;
    }
    .poster .content .detail .btn2::after{
        content: "";
        background-image: url({$_G['URL']['BEILAI_IMG']}/num02.png);
        width: 0.67rem;
        height: 0.8rem;
        background-size: 0.67rem 0.8rem;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        right: 0.57rem;
        top: 0.36rem;
    }
    .poster .content .detail .dots_btn{
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0.62rem;
        height: 0.42rem;
        background: #f8f8f8;
        color: #a5a5a5;
        font-weight: bold;
        text-align: center;
        line-height: 0.42rem;
        border-radius: 0.06rem;
    }
    .poster .content .detail .finger{
        position: absolute;
        right: 0.7rem;
        bottom: 1rem;
        display: flex;
        justify-content: flex-start;
        animation: shake 1s infinite;
    }
    .poster .content .detail .detail_right .finger .finger_img{
        width: 0.36rem;
        height: 0.24rem;
        margin-right: 0.1rem;
    }
    @keyframes shake {
        0%{
            transform: translateX(-30%);
        }
        50%{
            transform: translateX(-10%);
        }
        100%{
            transform: translateX(-30%);
        }
    }
    .poster .content .detail .detail_right .finger .finger_txt{
        width: 1.48rem;
        height: 0.24rem;
    }

    .service{
        background: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: fixed;
        z-index: 3;
    }
    .service .content{
        width: 6.15rem;
        height: 7.12rem;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 0.20rem;
        overflow: hidden;
    }
    .service .content .head{
        height: 1.1rem;
        line-height: 1.1rem;
        text-align: center;
        background-image: linear-gradient(to right,#fe7e8c,#f8347d);
        color: #ffffff;
        font-size: 0.32rem;
        position: relative;
    }
    .service .content .head .close{
        width: 0.33rem;
        height: 0.33rem;
        position: absolute;
        right: 0.4rem;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .service .content .body{
        height: 5.8rem;
        padding: 0.22rem 0.26rem 0;
        background: #ffffff;
    }
    .service .content .body .user{
        padding: 0.2rem 0;
        border-bottom: 0.01rem solid #eeeeee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .service .content .body .user .left{
        display: flex;
        justify-content: flex-start;
    }
    .service .content .body .user .left .icon{
        width: 0.87rem;
        height: 0.87rem;
        border-radius: 0.87rem;
    }
    .service .content .body .user .left .name{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 0.36rem;
    }
    .service .content .body .user .left .name .txt{
        color: #000000;
        font-size: 0.32rem;
    }
    .service .content .body .user .left .name .tel{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 0.30rem;
        color: #999999;
        padding-top: 0.2rem;
    }
    .service .content .body .user .left .name .tel .tel_img{
        width: 0.3rem;
        height: 0.3rem;
        margin-right: 0.12rem;
        padding-bottom: 0.1rem;
    }
    .service .content .body .user .phone{
        width: 0.63rem;
        height: 0.63rem;
    }
    .service .content .body .qrcode{
        display: flex;
        flex-direction: column;
    }
    .service .content .body .qrcode .code_img{
        width: 2.56rem;
        height: 2.56rem;
        margin: 0.3rem auto 0;
    }
    .service .content .body .qrcode .txt{
        font-size: 0.26rem;
        color: #999999;
        line-height: 1rem;
        display: block;
        text-align: center;
    }
</style>
<!--    海报-->
<div class="poster" style="display: none;">
    <div class="content" catchtap="stop">
        <div class="head">
            <img class="top_img" src="{$_G['URL']['BEILAI_IMG']}/top.png"/>
            <img class="close" src="{$_G['URL']['BEILAI_IMG']}/close.png" onclick="hidePoster()"/>
        </div>
        <div class="detail">
            <div class="d_top">
                <img class="avater" src="{$fans['avatar']}"/>
                <div class="detail_right">
                    <span class="name">{$fans['nickname']}</span>
                    <div class="detail_txt">
                        <div class="emojiTpl">
                            <span id="poster_txt">{$config['pageshare_txt']}</span>
                            <icon type="qq" class=""></icon>
                        </div>
                    </div>
                    <img class="poster_img" id="poster_img" src=""/>
                    <div class="finger">
                        <img class="finger_img" src="{$_G['URL']['BEILAI_IMG']}/finger.png" alt="">
                        <img class="finger_txt" src="{$_G['URL']['BEILAI_IMG']}/finger_txt.png" alt="">
                    </div>
                    <span class="time">5分钟前<span class="dots_btn">• •</span></span>

                </div>
            </div>
            <div class="btns">
                <div class="btn btn1"   onclick="copyTXT()"><img src="{$_G['URL']['BEILAI_IMG']}/copy.png" class="icon"/>一键复制发圈配文</div>
                <div class="btn btn2" ><img src="{$_G['URL']['BEILAI_IMG']}/share.png" class="icon"/>点击右上角分享给好友</div>
            </div>
        </div>
    </div>
</div>

<!--    客服弹窗-->
<div class="service" style="display: none;">
    <div class="content">
        <div class="head">
            <span>在线客服</span>
            <img class="close" src="{$_G['URL']['BEILAI_IMG']}/close.png" onclick="hideService()"/>
        </div>
        <div class="body">
            <div class="user">
                <div class="left">
                    <img class="icon" src="{$_G['URL']['BEILAI_IMG']}/b_icon2.png"/>
                    <div class="name">
                        <span class="txt">在线客服</span>
                        <div class="tel">
                            <img class="tel_img" src="{$_G['URL']['BEILAI_IMG']}/tel.png">
                            <span>{$kefu['mobile']}</span>
                        </div>
                    </div>
                </div>
                <a href="tel:{$kefu['mobile']}"><img class="phone" src="{$_G['URL']['BEILAI_IMG']}/phone.png"></a>
            </div>
            {if $kefu['qr_code']}
            <div class="qrcode">
                <img src="{$kefu['qr_code']}" class="code_img">
                <span class="txt">长按识别二维码联系我们</span>
            </div>
            {/if}
        </div>
    </div>
</div>

<script>

    function hidePoster(){
        $(".poster").hide();
    }
    function showPoster(){
        let waittips="{$poster_info['tips']}";
        let url="{$poster_info['img_url']}";
        if (waittips!=''){
            layer.msg(waittips);
        }
        if (waittips!='海报未开启' && waittips!='成功购买课程后，才能生成海报'){

            $.ajax({
                type:'POST',
                data:{},
                dataType : "json",
                url:url,
                success:function(data){
                    var data = data.message;
                    if(data.errcode == 0){
                        $("#poster_img").attr("src",data.img)
                        $(".poster").show();
                    }else{
                        layer.msg(data.msg);
                    }
                }
            });
        }
    }
    function copyTXT() {
        try {
            let range = document.createRange();
            range.selectNode(document.getElementById("poster_txt"));
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
            layer.msg('复制成功');
        } catch (e) {
            layer.msg('复制失败');
        }
    }


    function showService(){
        $(".service").show();
    }
    function hideService(){
        $(".service").hide();
    }
</script>